<template>
  <div class="page-container">
    <a-flex :vertical="true">
      <a-card style="width: 100%;">
        <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState" layout="inline">
          <a-flex wrap="wrap" gap="small">
            <a-form-item name="username" label="用户名">
              <a-input v-model:value="formState.username" placeholder="请输入用户名"></a-input>
            </a-form-item>

            <a-button type="primary" html-type="submit">搜索</a-button>
          </a-flex>

        </a-form>
      </a-card>

      <a-card style="width: 100%; margin: 12px 0 12px 0; min-height: calc(100vh - 250px);">
        <a-row :gutter="18">
          <a-col>
            <a-button type="primary">新建用户</a-button>
          </a-col>
          <a-col>
            <a-button>批量删除</a-button>
          </a-col>
        </a-row>
        <br />
        <a-table :columns="columns" :data-source="userListData.list" bordered :row-selection="rowSelection" :pagination="{defaultCurrent: 1, defaultPageSize: 10, showSizeChanger: true, showQuickJumper: true, total: userListData.total, showTotal: (total:number) => `共${total}条`}">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'password'">
              <a-space size="small">
                <a-input-password v-model:value="record.password" v-model:visible="record.visible"
                  :visibility-toggle="false" :bordered="false" />
                <a @click="record.visible = !record.visible">
                  <EyeOutlined v-if="record.visible" />
                  <EyeInvisibleOutlined v-else />
                </a>
              </a-space>
            </template>
            <template v-else-if="column.key === 'tags'">
              <span>
                <a-tag v-for="tag in record.tags" :key="tag"
                  :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                  {{ tag.toUpperCase() }}
                </a-tag>
              </span>
            </template>
            <template v-else-if="column.key === 'action'">
              <span>
                <a>重置密码</a>
                <a-divider type="vertical" />
                <a>删除</a>
                <a-divider type="vertical" />
              </span>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-flex>


  </div>
</template>

<script lang="ts" setup>
import { computed, onActivated, reactive } from 'vue'
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
import { userApi } from '@/api/user'


const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '密码',
    dataIndex: 'password',
    key: 'password',
  },
  {
    title: '创建人',
    dataIndex: 'createdUserId',
    key: 'createdUserId',
  },
  {
    title: '创建时间',
    key: 'createdTime',
    dataIndex: 'createdTime',
  },
  {
    title: '最近登录时间',
    key: 'lastLoginTime',
    dataIndex: 'lastLoginTime',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const state = reactive<{
  selectedRowKeys: string | number[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});


const onSelectChange = (selectedRowKeys: string | number[]) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};
const rowSelection = computed(() => ({
  selectedRowKeys: state.selectedRowKeys,
  onChange: onSelectChange,
}))

const formState = reactive({
  name: '',
  username: '',
})
const userListData = reactive({
  list: [],
  total: 0,
  pageNum: 1,
  pageSize: 10
})
const getUsersList = async () => {
  const res = await userApi.ListUsersByPage({
    pageNum: 1,
    pageSize: 10,
    ...formState ,
  })
  console.log(res);
  if (res?.code === 200) {
    console.log(JSON.stringify(res))
    userListData.total = res?.data?.total
    userListData.pageNum = res?.data?.pageNum
    userListData.pageSize = res?.data?.pageSize
    userListData.list = res?.data?.data
  }
}

onActivated(() => {
  getUsersList()
})
</script>

<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
}
</style>
